<template>
  <!-- 二次封装el-pagination组件 -->
  <!-- 外面需要传入：pageSize, total, 父组件监听一个getStart事件，事件携带一个计算好的start值，start值后续作为请求参数-->
  <el-row v-if="pageSize<total" id="my-pagination" type="flex" justify="center">
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changeFn"
    />
  </el-row>

</template>

<script>
export default {
  props: {
    pageSize: { type: Number, default: 3 }, // 每页显示条数
    total: { type: Number, default: 10 } // 数据总条数
  },
  methods: {
    changeFn(page) {
      const start = (page - 1) * this.pageSize
      this.$emit('getStart', start) // 返回一个_start
    }
  }
}
</script>

<style lang="scss" >
@import '@/styles/myStyle.scss';
#my-pagination{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    li{
    color:$bg-color1 !important;
    width: 25px;
    height: 25px;
    }
    .active{
        background-color: $bg-color2;
        color:#fff !important;
    }
    .el-pager li{
        min-width:0;
    }
}
</style>
